<template>
  <VChart
    ref="myChart"
    style="width: 100%; height: 100%"
    :option="option"
    :loading="loading"
    autoresize
    @legendselectchanged="onLegendChanged"
  />
</template>

<script setup>
import { computed, defineEmits } from 'vue'
import _ from 'lodash'
import VChart from 'vue-echarts'
const emit = defineEmits(['legend-change'])
const props = defineProps({
  isTitleShow: { type: Boolean, default: true }, // 是否显示标题
  title: { type: String, default: '' }, // 标题
  titleColor: { type: String, default: '#10e7f7' }, // 标题字体颜色
  titleSize: { type: String, default: '26px' }, // 标题字体大小
  subtitle: { type: String, default: '' }, // 副标题
  subTitleColor: { type: String, default: '#10e7f7' }, // 副标题字体颜色
  subTitleSize: { type: String, default: '14px' }, // 副标题字体大小
  isDataZoomShow: { type: Boolean, default: false }, // 是否显示滚动条
  isLegendShow: { type: Boolean, default: true }, // 是否显示图例
  isToolboxShow: { type: Boolean, default: false }, // 是否显示图表选择器
  isXaxisShow: { type: Boolean, default: false }, // X轴是否显示坐标轴刻度
  isYaxisShow: { type: Boolean, default: false }, // Y轴是否显示坐标轴刻度
  yAxisName: { type: String, default: '' }, // Y轴名称 (Y轴单位)
  sampling: { type: String, default: null }, // 精准采样策略 默认不设置 (lttb:采用Largest-Triangle-Three-Bucket算法;average：取过滤点的平均值;max：取过滤点的最大值;min：取过滤点的最小值;sum：取过滤点的和)
  chartData: { type: Object, default: () => ({}) }, // 图表数据
  loading: { type: Boolean, default: false }
})

const option = computed(() => ({
  title: {
    show: props.isTitleShow,
    text: props.title,
    left: 'center',
    textStyle: {
      color: props.titleColor,
      fontSize: props.titleSize,
      fontWeight: 'normal'
    },
    subtext: props.subtitle,
    subtextStyle: {
      color: props.subTitleColor,
      fontSize: props.subTitleSize,
      fontWeight: 'normal'
    }
  },
  tooltip: {
    trigger: 'axis',
    padding: [14, 20],
    textStyle: { fontSize: 14, color: '#333' },
    formatter: function (params) {
      let str = params[0].data[0] + '<br />'
      params.forEach((item) => {
        if (item.data[1]) {
          str +=
            '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
            item.color +
            '"></span>' +
            item.seriesName +
            '：' +
            item.data[1] +
            '<br />'
        }
      })
      return str
    }
  },
  grid: {
    top: '24px',
    left: '4px',
    right: '30px',
    bottom: '60px',
    containLabel: true
  },
  dataZoom: [
    {
      type: 'inside',
      show: props.isDataZoomShow,
      start: 0,
      end: 100,
      filterMode: 'empty'
    }
  ],
  legend: {
    left: 'center',
    bottom: '3%',
    itemGap: 25,
    itemWidth: 8,
    itemHeight: 8,
    show: props.isLegendShow,
    icon: 'circle',
    textStyle: {
      color: () => {
        return _.map(props.chartData.yAxis, (item) => item.color)
      }
    },
    selected: {
      原始数据: true,
      预测数据: true,
      对比数据: false
    }
  },
  toolbox: {
    show: props.isToolboxShow,
    itemSize: 20,
    feature: {
      brush: { type: ['rect', 'clear'], title: { rect: '剔野' } }
    },
    iconStyle: { borderColor: '#333' },
    emphasis: {
      iconStyle: { textFill: '#333', textAlign: 'right' }
    },
    right: '3%',
    top: '2%'
  },
  brush: {
    xAxisIndex: 'all',
    brushLink: 'all',
    outOfBrush: { colorAlpha: 0.1 },
    removeOnClick: false
  },
  xAxis: {
    type: props.chartData.xAxisType ? props.chartData.xAxisType : 'category',
    splitLine: { show: false },
    axisLine: { lineStyle: { width: 2, color: '#E8E8E8' } },
    axisTick: {
      show: props.isXaxisShow,
      alignWithLabel: true,
      lineStyle: { width: 2 }
    },
    axisLabel: {
      rotate: 0,
      color: '#333',
      formatter: function (value) {
        const dates = new Date(value)
        let month = dates.getMonth() + 1
        month = month < 10 ? '0' + month : month
        const date = dates.getDate() < 10 ? '0' + dates.getDate() : dates.getDate()
        const h = dates.getHours() < 10 ? '0' + dates.getHours() : dates.getHours()
        const m = dates.getMinutes() < 10 ? '0' + dates.getMinutes() : dates.getMinutes()
        const s = dates.getSeconds() < 10 ? '0' + dates.getSeconds() : dates.getSeconds()
        return dates.getFullYear() + '-' + month + '-' + date + '\n' + h + ':' + m + ':' + s
      }
    },
    data: props.chartData.xAxis
  },
  yAxis: {
    type: 'value',
    name: props.yAxisName,
    splitLine: {
      show: true,
      lineStyle: { color: '#E8E8E8', opacity: 0.5, type: 'dotted' }
    },
    axisLine: { show: true, lineStyle: { width: 2, color: '#E8E8E8' } },
    axisTick: {
      show: props.isYaxisShow,
      alignWithLabel: true,
      lineStyle: { width: 2 }
    },
    axisLabel: { color: '#333' }
  },
  series: _.map(props.chartData.yAxis, (item) => ({
    large: true,
    type: item.type || 'line',
    symbol: item.symbol || 'circle',
    smooth: true,
    symbolSize: item.symbolSize || 8,
    showSymbol: item.showSymbol || false,
    name: item.name,
    data: item.data,
    markLine: item.markLine,
    animation: false,
    sampling: props.sampling,
    itemStyle: {
      color: item.color,
      borderColor: 'rgba(255,255,255,0.8)',
      borderWidth: 0
    }
  }))
}))

const onLegendChanged = (val) => {
  emit('legend-change', val.selected)
}
</script>
